<template>
    <div>
        <div class="pan-title">属性面板</div>
        <div class="component-information_container" id="component-info_container"></div>
    </div>
</template>

<script>
    import MetaDataRenderer from './MetaDataRenderer';
    export default {
        name: "component-detail-information",
        props:["currentTool"],
        data:function () {
            return {
                metaData:null
            }
        },
        methods:{
            initMetaDataRender(){
                this.metaData = new MetaDataRenderer({
                    domNode: "component-info_container"
                });
                this.metaData.addModel({id: 1, src: "models/gltf/houseDemo1213.xml"});
            },
            /**
             * 初始化pick监听
             */
            initPickListener(){
                var self = this;
                GOLOAlBAL_OPEOBJ.cameraControl.on("picked", function (hit) {
                    var meshId = hit.mesh.id;
                    if(meshId.indexOf(".")>0){
                        meshId = meshId.substring(0,meshId.indexOf("."));
                    }
                    self.metaData.setSelected([meshId]);
                });
            }
        },
        mounted(){
            this.initMetaDataRender();
            this.initPickListener();
        }
    }
</script>

<style scoped>
    .pan-title{
        background: rgb(31,158,155);
        color: white;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .component-information_container{
        overflow-y: auto;
        height: 605px;
        color: white;
        background-color: rgba(3, 29, 35, 0.86) !important;
    }

    /*滚动条样式*/
    .component-information_container::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 6px;
    }
    .component-information_container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(228, 96, 50, 0.65);
        background: rgba(228, 96, 50, 0.65);
    }
    .component-information_container::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(228, 96, 50, 0.65);
        border-radius: 0;
        background: rgba(228, 96, 50, 0.1);
    }

</style>